<template>
	<view class="gesture-box">
		<my-top @back="back" :isline="true" title="手势密码"></my-top>
		<view v-if="classShow == 1" class="title">
			<view>设置新的手势密码</view>
			<view>请绘制解锁图案</view>
		</view>
		<view v-if="classShow == 2" class="title">
			<view>再次绘制确认手势密码</view>
			<view>请绘制解锁图案</view>
		</view>
		<view v-if="classShow == 3" class="title">
			<view>两次绘制密码不相同</view>
			<view>请重新开始绘制</view>
		</view>
		<mpvueGestureLock @end="endLine" :containerWidth="500" :cycleRadius="40"></mpvueGestureLock>
	</view>
</template>

<script>
	import mpvueGestureLock from "@/components/mpvueGestureLock/index.vue"
	export default {
		components: {
			mpvueGestureLock
		},
		data() {
			return {
				pasd1: [],
				classShow:1,
			}
		},
		methods: {
			back(){
				uni.redirectTo({
					url:"AccountSecurity"
				})
			},
			endLine(val) {
				if (this.pasd1.length > 0) {
					if(val.toString() == this.pasd1.toString()){
						uni.navigateBack({
							delta:1,
							animationType: "pop-out",
							animationDuration: 200
						})
					}else{
						this.pasd1 = [];
						this.classShow = 3;
					}
				} else {
					this.pasd1 = val;
					this.classShow = 2;
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		width: 100%;
		height: 200rpx;
		text-align: center;
		line-height: 100rpx;
	}

	.gesture-box {
		width: 100%;
		min-height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #F8F8F8;
	}
</style>
